<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
// 导入相关接口
import { getClassifyPage, addClassifyApi, editClassifyApi, deleteClassifyApi } from '@/api/backend/classify.js'
import { ElMessage, ElMessageBox } from 'element-plus'

// 页面相关
const dialogFormVisible = ref(false)
const title = ref('')
const XSDialogFormVisible = (xst, type) => {
    dialogFormVisible.value = true;
    title.value = xst;
    classifyData.value.type = type;
}
const classifyData = ref({
    id: "",
    name: "",
    sort: 0,
    type: null,
})
// 清除残留数据
const qc = (() => {
    classifyData.value.id = "";
    classifyData.value.name = "";
    classifyData.value.sort = 0;
    classifyData.value.type = null;
})
// 添加分类,弹窗的取消,确认点击事件
function dialogFormCancelClick() {
    // 取消
    // 清除classifyData数据
    qc();
    // 关闭弹窗
    dialogFormVisible.value = false;
}
function dialogFormConfirmClick() {
    // 校验
    submitForm(classifyRef)
        .then((result) => {
            if (result) {
                // 确认
                if (classifyData.value.id == "") {
                    // 执行添加方法
                    addClassify();
                } else {
                    // 执行编辑方法
                    editClassify();
                }
                // 清除classifyData数据
                qc();
                // 关闭弹窗
                dialogFormVisible.value = false;
            }
            // 处理结果为 false 的情况
        });
}
// 获取分页数据代码
const currentPage = ref(1)
const pageSize = ref(5)
const disabled = ref(false)
const total = ref(0)
const tableData = ref([])
const handleSizeChange = (val) => {
    // 调用获取分页数据方法
    getClassifyP();
}
const handleCurrentChange = (val) => {
    // 调用获取分页数据方法
    getClassifyP();
}
// 映射关系
const typeMapping = {
    1: '菜品',
    2: '套餐'
}
// 计算属性：转换显示
const transformedTableData = computed(() => {
    return tableData.value.map(item => {
        return {
            ...item,
            type: typeMapping[item.type]
        }
    })
})
// 获取分类信息分页数据
const getClassifyP = async () => {
    const params = {
        page: currentPage.value,
        pageSize: pageSize.value,
    }
    //调用接口,获取分类数据
    let result = await getClassifyPage(params);
    if (result.code === 1) {
        tableData.value = result.data.records || []
        total.value = result.data.total
        return;
    } else {
        return;
    }
}
getClassifyP();
// 添加分类信息数据
const addClassify = async () => {
    //调用接口,添加分类数据
    let result = await addClassifyApi(classifyData.value);
    if (result.code === 1) {
        ElMessage.success('添加成功');
        // 重新获取分页数据
        getClassifyP();
        return;
    } else {
        ElMessage.error(result.msg ? result.msg : '添加失败');
        return;
    }
}
// 删除分类方法
const deleteClassify = async (row) => {
    //调用接口,获取员工数据
    let result = await deleteClassifyApi(row.id);
    if (result.code === 1) {
        ElMessage.success('删除成功');
        // 重新获取分页数据
        getClassifyP();
        return;
    } else {
        ElMessage.error(result.msg ? result.msg : '删除失败');
        // 重新获取分页数据
        getClassifyP();
        return;
    }
}
// 编辑分类方法
const bg = async (row) => {
    // 拷贝数据
    classifyData.value.id = row.id;
    classifyData.value.name = row.name;
    classifyData.value.sort = row.sort;
    const etype = row.type == '菜品' ? 1 : 2;
    XSDialogFormVisible('编辑分类', etype)
}
const editClassify = async () => {
    //调用接口
    let result = await editClassifyApi(classifyData.value);
    if (result.code === 1) {
        ElMessage.success('修改成功');
        getClassifyP();
        return;
    } else {
        ElMessage.error(result.msg ? result.msg : '修改失败');
        getClassifyP();
        return;
    }
}
// 表单数据校验
const classifyRef = ref(null);

const classifyRules = {
    name: [
        { required: true, message: '请输入分类名', trigger: 'blur' },
    ],
}
const submitForm = (fromEL) => {
    return new Promise((resolve, reject) => {
        fromEL.value.validate((valid) => {
            if (valid) {
                resolve(true);
            } else {
                resolve(false);
            }
        })
    });
}

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>分类管理</span>
                <!-- Form -->
                <el-button type="success" plain @click="XSDialogFormVisible('添加菜品分类', 1)">
                    添加菜品分类
                </el-button>
                <!-- Form -->
                <el-button type="success" plain @click="XSDialogFormVisible('添加套餐分类', 2)">
                    添加套餐分类
                </el-button>
                <el-dialog v-model="dialogFormVisible" align-center width="33%" :show-close="false"
                    :close-on-click-modal="false" :close-on-press-escape="false">
                    <template #header="{ titleId, titleClass }">
                        <div class="my-header">
                            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
                        </div>
                    </template>
                    <el-form :model="classifyData" label-position="left " label-width="100px" ref="classifyRef"
                        :rules="classifyRules">
                        <el-form-item label="分类名称:" prop="name">
                            <el-input v-model="classifyData.name" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="排序:">
                            <el-input-number v-model="classifyData.sort" :min="0" :max="100" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogFormCancelClick()">取消</el-button>
                            <el-button @click="dialogFormConfirmClick()">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </template>
        <el-table :data="transformedTableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column label="序号" width="100" type="index"> </el-table-column>
            <el-table-column label="分类名称" prop="name"></el-table-column>
            <el-table-column label="分类类型" prop="type"></el-table-column>
            <el-table-column label="操作时间" prop="updateTime"></el-table-column>
            <el-table-column label="排序" prop="sort"></el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="primary" :icon="Edit" circle @click="bg(row)" />
                    <el-button type="danger" :icon="Delete" circle @click="deleteClassify(row)" />
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <div>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :disabled="disabled"
                :page-sizes="[5, 15, 30]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.el-pagination {
    margin-top: 10px;
    justify-content: center;
}

//

.el-dialog .el-dialog__body {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>